<template>
  <div class="short_note">
    <!-- <div class="btn">
      <el-button type="primary" @click="onAdd">新增</el-button>
    </div> -->
    <el-table :data="tableData" border>
      <el-table-column prop="title" label="标题" align="center" />
      <el-table-column prop="content" label="内容" align="center" />
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <div>
            <el-button type="text" @click="onEdit(scope.row)">编辑</el-button>
            <!-- <el-button type="text" @click.native.stop="onDel(scope.row)"
              >删除</el-button
            > -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="短信通知模板"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="dataForm"
        ref="dataForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="标题 :" prop="title">
          <el-input
            readonly
            v-model="dataForm.title"
            placeholder="请输入标题"
          />
        </el-form-item>
        <el-form-item label="内容 :" prop="content">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="dataForm.content"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
import {
  showCpFollowUpSmsTemplate,
  saveCpFollowUpSmsTemplate,
} from "@/api/follow-up/chest-pain";
export default {
  name: "",
  data() {
    return {
      tableData: [],
      dataForm: {},
      dialogVisible: false,
      rules: {
        title: { required: true, message: "请输入标题", trigger: "blur" },
        content: { required: true, message: "请输入内容", trigger: "blur" },
      },
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    async getDataList() {
      const result = await showCpFollowUpSmsTemplate();
      this.tableData = [
        {
          title: "随访患者短信通知模板",
          content: result.data.content,
        },
      ];
    },
    onEdit(row) {
      this.dataForm = { ...row };
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    onSubmit() {
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          const formData = new FormData();
          formData.append("content", this.dataForm.content);
          await saveCpFollowUpSmsTemplate(formData);
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "保存成功",
          });
          this.getDataList();
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped >
.short_note {
  .btn {
    display: flex;
    justify-content: end;
    margin-bottom: 10px;
  }
}
</style>
